CSS3干货19：CSS3中的遮罩 mask 样式及其拓展 |
您所在的位置：网站首页 › mask-image 兼容性 › CSS3干货19：CSS3中的遮罩 mask 样式及其拓展 |
CSS3干货19：CSS3中的遮罩 mask 样式及其拓展
|
在网页中看到这种图：
第一反应是把这个图片切片，做成png。 没毛病~！但是，如果要更换图中的妹子，岂不是又要切一次图？？麻烦。 今天居然看到 CSS3 的一个新增样式 mask （遮罩），可以简单实现上图效果，而且可以保证内容图片完整，直接更换不用切片。 开始~ 一、准备工作准备内容图片，和遮罩png图。不出意外的话，建议内容图片和遮罩png图大小一样（当然也可以不一样，具体根据需要来定。） PNG图：400*400，名：m1.png
内容图：400*400
.mask{
margin-left: auto;
margin-right: auto;
width: 400px;
height: 400px;
}
三、添加 mask
.mask{
...省略其他样式...
mask: url("images/m1.png") center center/400px 400px no-repeat ;
-webkit-mask:url("images/m1.png") center center/400px 400px no-repeat ;
}
解释：设置mask遮罩图片的地址，位置 / 大小，是否重复。
当鼠标放到 div.mask 上的时候，mask部分会放大。 五、小结 作为遮罩mask的图片，不论颜色，只看透明区域和不透明区域。mask能盖住的部分除了图片，文字之类的内容都可以。目前 mask 样式还未最终形参标准，chrome 派系浏览器还必须添加 浏览器前缀 -webkit-。不过 firefox 从 53 版本开始已经全面支持 mask。mask 的浏览器支持情况如下：图来自 caniuse.com
3. 如果 mask 图片有半透明的部分，那么展示的内容效果也是半透明的。 换一个半透明的png图，作为 mask 的效果：
SVG 也有 mask 效果。 I love you 我爱你
注意： 1. SVG 遮罩中，白色可见，黑色不可见，其他颜色根据颜色的深浅呈现不同的半透明效果。 2. 在应用 mask 的内容上要添加 mask 属性。 拓展2：结合SVG和mask样式的遮罩HTML： I love you 我爱你
CSS： *{ margin: 0; padding: 0; } .mask{ margin-left: auto; margin-right: auto; width: 400px; height: 400px; position: relative; } .mask svg{ position: absolute; top: 0; right: 0; } .mask svg text{ text-anchor: middle; font-size: 50px; } .mask > svg > rect{ -webkit-mask: url(#svgmask); mask: url(#svgmask); }
当然，更多 mask 的有趣应用，等着我们去开发~！
|
【本文地址】
今日新闻 |
推荐新闻 |